<template>
  <el-dialog
    v-model="showDialog"
    :title="t('upgradeDetail')"
    width="800px"
    :close-on-click-modal="false"
  >
    <div v-if="showDialog" class="upgrade-detail-container">
      <el-tabs v-loading="teamLoading" v-model="activeTab" type="card">
        <!-- 团队级差等级页签 -->
        <el-tab-pane :label="t('teamLevel')" name="team">
          <el-table :data="teamLevelData" border size="large">
            <template #empty>
              <span>{{ t("emptyData") }}</span>
            </template>
            <el-table-column
              prop="fenxiaoLevel.level_name"
              :label="t('levelName')"
              min-width="200"
            />
            <el-table-column
              prop="type"
              :label="t('upgradeMethod')"
              min-width="200"
              align="center"
            >
            <template #default="{ row }">
              <span>{{ row.type == 1 ? '手动' : '自动' }}</span>
            </template>
            </el-table-column>
            <el-table-column
              prop="create_time"
              :label="t('upgradeTime')"
              min-width="200"
              align="center"
            />
          </el-table>
        </el-tab-pane>

        <!-- 分销等级页签 -->
        <el-tab-pane :label="t('distributionLevel')" name="distribution">
          <el-table :data="distributionLevelData" border size="large">
            <template #empty>
              <span>{{ t("emptyData") }}</span>
            </template>
            <el-table-column
              prop="fenxiaoLevel.level_name"
              :label="t('levelName')"
              min-width="200"
            />
            <el-table-column
              prop="type"
              :label="t('upgradeMethod')"
              min-width="200"
              align="center"
            >
            <template #default="{ row }">
              <span>自动</span>
            </template>
            </el-table-column>
            <el-table-column
              prop="create_time"
              :label="t('upgradeTime')"
              min-width="200"
              align="center"
            />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialog = false">{{ t("close") }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { t } from "@/lang";
import { getMemberUpgradeDetail } from "@/app/api/member";

// 弹窗显示状态
const showDialog = ref<boolean>(false);

// 当前激活的页签
const activeTab = ref<string>("team");

// 团队级差等级数据
const teamLevelData = ref<any[]>([]);
const teamLoading = ref<boolean>(false);

// 分销等级数据
const distributionLevelData = ref<any[]>([]);

// 当前会员信息
const currentMember = ref<any>(null);

// 设置会员信息
const setFormData = (member: any) => {
  activeTab.value = "team";
  currentMember.value = member;
  loadUpgradeDetail();
};

// 加载升级详情数据
const loadUpgradeDetail = async () => {
  if (!currentMember.value) return;
  // 加载团队级差等级数据
  teamLoading.value = true;
  try {
    const res = await getMemberUpgradeDetail(currentMember.value.member_id);
    teamLevelData.value = res.data?.team || [];
    distributionLevelData.value = res.data?.fenxiao || [];
  } finally {
    teamLoading.value = false;
  }
};

// 暴露方法给父组件调用
defineExpose({
  showDialog,
  setFormData,
});
</script>

<style lang="scss" scoped>
.upgrade-detail-container {
  .el-tabs {
    .el-tab-pane {
      padding: 20px 0;
    }
  }
}
</style>
